<template>
	<view class="m-vs" v-if="storyId == curStoryId">
		<view class="test">{{testData}}</view>
		<view class="top-enemy-content" v-if="storyId == curStoryId">
			<view class="prop-card-list">
				<view class="card-item" v-for="(item,index) in enemyPropCardList" :key="index">
					<image v-if="item.image" class="item-image" :src="item.image" mode="widthFix"></image>
					<view class="bottom-info">
						<view class="top-start">
							<u-rate :size="20" :count="5" active-color="#faf992" v-model="item.start"
								:disabled="true"></u-rate>
						</view>
						<view class="bottom-name">{{item.name}}</view>
					</view>
					<view class="top-type-name">
						<text v-if="item.type=='person'">舞姬</text>
						<text v-else>道具</text>
					</view>
				</view>
			</view>
			<view class="person-card-list">
				<view class="card-item" v-for="(item,index) in enemyPersonCardList" :key="index">
					<image v-if="item.image" class="item-image" :src="item.image" mode="widthFix"></image>
					<view class="bottom-info">
						<view class="top-start">
							<u-rate :size="20" :count="5" active-color="#faf992" v-model="item.start"
								:disabled="true"></u-rate>
						</view>
						<view class="bottom-name">{{item.name}}</view>
					</view>
					<view class="top-type-name">
						<text v-if="item.type=='person'">舞姬</text>
						<text v-else>道具</text>
					</view>
				</view>
			</view>
			<view class="my-info">
				<view class="my-nickName">{{enemyNickName}}</view>
				<view class="my-avatar">
					<image class="avatar-img" :src="enemyAvatar" mode="aspectFill"></image>
				</view>

			</view>
		</view>
		<view class="bottom-my-content" v-if="storyId == curStoryId">
			<view class="my-info">
				<view class="my-avatar">
					<image class="avatar-img" :src="myAvatar" mode="aspectFill"></image>
				</view>
				<view class="my-nickName">{{myNickName}}</view>

			</view>
			<view class="person-card-list">
				<view class="card-item" v-for="(item,index) in myPersonCardList" :key="index">
					<image v-if="item.image" class="item-image" :src="item.image" mode="widthFix"></image>
					<view class="bottom-info">
						<view class="top-start">
							<u-rate :size="20" :count="5" active-color="#faf992" v-model="item.start"
								:disabled="true"></u-rate>
						</view>
						<view class="bottom-name">{{item.name}}</view>
					</view>
					<view class="top-type-name">
						<text v-if="item.type=='person'">舞姬</text>
						<text v-else>道具</text>
					</view>
				</view>
			</view>
			<view class="prop-card-list">
				<view class="card-item" v-for="(item,index) in myPropCardList" :key="index">
					<image v-if="item.image" class="item-image" :src="item.image" mode="widthFix"></image>
					<view class="bottom-info">
						<view class="top-start">
							<u-rate :size="20" :count="5" active-color="#faf992" v-model="item.start"
								:disabled="true"></u-rate>
						</view>
						<view class="bottom-name">{{item.name}}</view>
					</view>
					<view class="top-type-name">
						<text v-if="item.type=='person'">舞姬</text>
						<text v-else>道具</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 		<video src="https://cdn.osisx.com/game/e416845113cdf0df55ad616de9bf72b2/20240924/VID8f6cdb9c/VID8f6cdb9c.mp4"
			autoplay="true" :controls="false" object-fit="cover" class="video-box"></video> -->


		<view class="bottom-btn-box">
			<view class="ready-btn" @click="handleReadyToFight">
				<image class="ready-img"
					src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/38ce5662bfa34cf6a66c2de642d9a5d0.png"
					mode="aspectFill"></image>
				<view class="ready-text">备战</view>
			</view>
			<view class="start-btn" @click="handleStartFight">开始战斗</view>


		</view>

		<mArrange ref="vsMarrange" v-if="showArrange"></mArrange>
	</view>
</template>

<script>
	import mArrange from "@/components/m-arrange/index.vue"
	import {
		mapGetters,
		mapState
	} from "vuex";
	export default {
		components: {
			mArrange
		},
		props: {
			paramsJson: {
				type: Object,
				default: () => {
					return {}
				}
			},
			storyId: {
				type: String,
				default: ""
			},
		},
		computed: {
			...mapGetters(["globalGameCtx", "curStoryId", "testData"]),
		},
		watch: {
			curStoryId: {
				handler(newVal, oldVal) {
					if (newVal === this.storyId) {
						// let storyData = this.globalGameCtx.nextStorySet[newVal]

						// 获取数据





					}
				},
				deep: true,
				immediate: true
			},
		},
		data() {
			return {
				showArrange: false,
				enemyAvatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/554184f48f8d42a09444b31720ff1886.jpg",
				enemyNickName: "凯哥哥",
				enemyPersonCardList: [],
				enemyPropCardList: [],
				myAvatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
				myNickName: "亮哥哥",
				myPersonCardList: [],
				myPropCardList: []
			}
		},
		mounted() {
			// this.handleGetData()
		},
		created() {
			this.handleGetData()
		},
		methods: {
			handleStartFight() {
				this.$emit("getGameResult")
			},
			handleReadyToFight() {
				this.showArrange = true
				this.$nextTick(() => {
					this.$refs.vsMarrange.open()
				})
			},
			handleGetData() {
				this.enemyPersonCardList = [{
						id: 5,
						name: "妙陈-幸运女神",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/afa5839633f64d4fa8c71162eef9cfb9.png",
						type: "person",
						start: 5
					},
					{
						id: 6,
						name: "妙陈-泳装教练",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8d247b99171949ddab010bd8e7eda006.png",
						type: "person",
						start: 4
					},
					{
						id: 7,
						name: "妙陈-兔兔警官",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d82a4c86df524fdb82088d48754ea85e.png",
						type: "person",
						start: 3
					}
				]

				this.enemyPropCardList = [{
						id: 10,
						name: "豪华游艇",
						image: "https://cdn.osisx.com/wenzhu/images/gifts/haohuayouting.png",
						type: "prop",
						start: 5
					},
					{
						id: 11,
						name: "私人飞机",
						image: "https://cdn.osisx.com/wenzhu/images/gifts/feiji.png",
						type: "prop",
						start: 5
					},
					{
						id: 12,
						name: "浪漫满屋",
						image: "https://cdn.osisx.com/wenzhu/images/gifts/rose.png",
						type: "prop",
						start: 4
					}
				]

				this.myPersonCardList = [{
						id: 0,
						name: "秘书-白领制服",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/71ee11eebf0c4f6d8a1a94368cdce6ba.jpg",
						type: "person",
						start: 3
					},
					{
						id: 1,
						name: "秘书-制服诱惑",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1e9ef7b1cf524c09acb62c202ea4f262.jpg",
						type: "person",
						start: 5
					},
					{
						id: 2,
						name: "秘书-清纯可爱",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68075b52d7764ff2b5cf3d8d04856188.jpg",
						type: "person",
						start: 4
					}
				]
				this.myPropCardList = [{
						id: 8,
						name: "超级跑车",
						image: "https://cdn.osisx.com/wenzhu/images/gifts/haohuapaoche.png",
						type: "prop",
						start: 5
					},

					{
						id: 9,
						name: "星舟泛心",
						image: "https://cdn.osisx.com/wenzhu/images/gifts/xingzhoufanxin.png",
						type: "prop",
						start: 3
					},
					{
						id: 10,
						name: "豪华游艇",
						image: "https://cdn.osisx.com/wenzhu/images/gifts/haohuayouting.png",
						type: "prop",
						start: 5
					}
				]


			}
		}
	}
</script>

<style lang="scss" scoped>
	.m-vs {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100vw;
		height: 100vh;
		z-index: 99999999999;
		// background-color: pink;

		.test {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.bottom-btn-box {
			position: absolute;
			bottom: 50rpx;
			width: 100vw;
			height: 70rpx;
			// background-color: pink;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			z-index: 999;

			.ready-btn {
				position: relative;
				width: 65rpx;
				height: 65rpx;
				border-radius: 50%;
				background-color: rgba(0, 0, 0, .6);
				margin-right: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 10rpx;

				.ready-img {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;

				}

				.ready-text {
					position: absolute;
					left: 0rpx;
					bottom: -10rpx;
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 20rpx;
					line-height: 20rpx;
					text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .3);
					color: #fff;

				}
			}

			.start-btn {
				width: 300rpx;
				height: 70rpx;
				font-size: 30rpx;
				line-height: 70rpx;
				border-top-left-radius: 30rpx;
				border-bottom-left-radius: 5rpx;
				font-weight: 700;
				// color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #fadd8c;
				box-shadow: 0 0 10rpx #fadd8c;
				color: #572c0d;
				font-style: italic;
			}
		}

		.video-box {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100vw;
			height: 100vh;
			z-index: 1;
		}

		.prop-card-list,
		.person-card-list {
			width: 100%;
			height: 229rpx;
			// background-color: #fff;
			display: flex;




			.card-item {
				position: relative;
				width: 160rpx;
				height: 229rpx;
				border-radius: 10rpx;
				background-color: #fff;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				overflow: hidden;
				box-shadow: 0rpx 0rpx 8rpx #fff;

				&:nth-child(3n) {
					margin-right: 0rpx;
				}

				.top-type-name {
					position: absolute;
					left: 0rpx;
					top: 0rpx;
					width: 100%;
					height: 30rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 24rpx;
					line-height: 24rpx;
					font-weight: 700;
					color: #fff;
					text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .6);
					padding-left: 10rpx;
					z-index: 9;
				}

				.item-image {
					position: absolute;
					left: 0rpx;
					top: 0rpx;
					width: 100%;
					z-index: 1;

				}

				.bottom-info {
					position: absolute;
					left: 0rpx;
					bottom: -1rpx;
					width: 100%;
					height: 70rpx;
					// background: linear-gradient(180deg, rgba(10, 7, 27, 0) 0%, #06050b 100%);
					background: linear-gradient(180deg, rgba(10, 7, 27, 0) 0%, rgba(65, 103, 185, .8) 100%);
					z-index: 2;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;


					.top-start {
						width: 100%;
						height: 30rpx;
						box-sizing: border-box;
						// background-color: pink;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.bottom-name {
						width: 100%;
						display: flex;
						justify-content: center;
						font-size: 20rpx;
						line-height: 20rpx;
						color: #fff;
						text-shadow: rgba(0, 0, 0, .3);
						// margin-top: 15rpx;
						margin-bottom: 10rpx;
						margin-top: 5rpx;
					}

				}

			}

		}


		.my-info {
			position: absolute;
			// left: 15rpx;
			// top: -75rpx;
			width: 350rpx;
			height: 55rpx;
			// background-color: pink;
			background: linear-gradient(90deg, rgba(10, 7, 27, 0) 0%, rgba(0, 0, 0, .4) 20%, rgba(0, 0, 0, .4) 50%, rgba(0, 0, 0, .4) 80%, rgba(10, 7, 27, 0) 100%);
			display: flex;

			align-items: center;
			font-size: 30rpx;
			font-weight: 700;
			line-height: 55rpx;
			color: #fff;

			.my-avatar {
				// position: absolute;
				// left: -5rpx;
				// top: 50%;
				width: 45rpx;
				height: 45rpx;
				border-radius: 50%;
				box-sizing: border-box;
				// transform: translateY(-50%);
				box-shadow: 0rpx 0rpx 10rpx #fff;

				.avatar-img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}

			}

			.my-nickName {
				width: 220rpx;
				height: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				// text-align: center;
			}


		}

		.top-enemy-content {
			position: absolute;
			left: 0rpx;
			// top: 180rpx;
			top: -500rpx;
			width: 100vw;
			// height: 500rpx;
			// background-color: pink;
			animation: topShowCards 1s forwards;
			// animation-delay: 1s;
			padding-right: 80rpx;
			box-sizing: border-box;
			z-index: 9;


			.prop-card-list,
			.person-card-list {
				justify-content: flex-end;
			}

			.prop-card-list {
				margin-bottom: 20rpx;
			}

			.my-info {
				right: 80rpx;
				bottom: -75rpx;
				justify-content: flex-end;

				.my-avatar {
					right: -5rpx;
				}

				.my-nickName {
					text-align: right;
					margin-right: 20rpx;
				}

			}

		}

		.bottom-my-content {
			position: absolute;
			left: 0rpx;
			// bottom: 180rpx;
			bottom: -500rpx;
			width: 100vw;
			// height: 500rpx;
			// background-color: pink;
			animation: bottomShowCards 1s forwards;
			// animation-delay: 1s;
			z-index: 9;



			padding-left: 80rpx;
			box-sizing: border-box;


			.prop-card-list,
			.person-card-list {
				justify-content: flex-start;
			}

			.person-card-list {
				margin-bottom: 20rpx;
			}

			.my-info {
				left: 80rpx;
				top: -75rpx;
				justify-content: flex-start;

				.my-avatar {
					left: -5rpx;
				}

				.my-nickName {
					text-align: left;
					margin-left: 20rpx;
				}

			}

		}


		@keyframes topShowCards {
			0% {
				top: -500rpx;

			}

			100% {
				top: 180rpx
			}
		}

		@keyframes bottomShowCards {
			0% {
				bottom: -500rpx;

			}

			100% {
				bottom: 180rpx
			}
		}
	}
</style>